<template>
	<view>
	<view class="header">
		<view class="name">{{info.name}}</view>
			<view class="flex info">
				<view class="contributors">
					投稿人:<text style="padding-left: 12rpx;">{{info.contributors || '无'}}</text>
				</view>
		</view>
	</view>
	<!-- 内容 -->
	<view class="content">
		<view class="">
				<Title :title="'内容'"></Title>
		</view>
		<view class="">
			<u-parse :html="info.content"></u-parse>
		</view>
		<view class="foot flex flexBei">
			<view class="time textHd">
				发布时间:{{info.createTime}}
			</view>
			<view class="icons flex">
				<view class="iconItem" @click="startUpdate">
					<view class="iconfont inview " :class="(iscollection ? 'icon-shoucang3' : 'icon-shoucang2')"></view>
					<text>{{info.likes > 999 ? '999+': info.likes}}</text>
				</view>
				<view class="iconItem">
					<view class="iconfont inview icon-liulan-copy"></view>
					<text>{{info.reading > 999 ? '999+' : info.reading}}</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import Title from '../../components/title.vue'
	import { MedicalDetailsStory, historyUpdate } from '../../api/medical.js'
	export default {
		data() {
			return {
			  id: '',
			  info: {},
			  iscollection: false
			};
		},
		onLoad(e) {
		  this.id = e.id	
		},
		mounted() {
		  this.getDetails()
		},
		components: {
			Title
		},
		methods: {
			// 获取红色故事详情
			async getDetails () {
			  const res  = 	await MedicalDetailsStory({storyId: this.id})
			  this.info = res.data.data.data
			  this.info.createTime = this.info.createTime.slice(0, 10)
			},
			startUpdate () {
				this.debounce(this.updateHistory)
			},
			// 修改红色故事
			async updateHistory () {
				let params
				if (this.iscollection) {
					 params = {
						storyId: this.id,
						likes: this.info.likes - 1
					}
				} else {
					params = {
						storyId: this.id,
						likes: this.info.likes + 1
					}
				}
				this.iscollection = !this.iscollection
				const res = await historyUpdate(params)
				this.getDetails()
			}
		}
	}
</script>

<style lang="scss" scoped>
.header {
	background-color: #fff;
	padding: 24rpx;
	.name {
		font-size: 36rpx;
		font-weight: bold;
		color: $theme-color;
	}
	.info {
		line-height: 72rpx;
	.contributors {
		flex: 1;
	}
	}	
}
.content {
	margin-top: 28rpx;
	padding: 12rpx 24rpx;
	background-color: #fff;
	.foot {
		padding: 24rpx   8rpx 0 8rpx;
		.time {
		   width: 400rpx;
			color: #999;
		}
		.icons {
			width: 340rpx;
			display: flex;
			justify-content: flex-end;
			.iconItem {
				width: 160rpx;
				text-align: center;
				color: $theme-color;
				font-weight: bold;
				.iconfont {
					padding-right: 8rpx;
					font-size: 36rpx;
					
				}
			}
		  }	
	}
	}
</style>
